<template>
  <div>
    <div class="p-20px">
      <el-button @click="$router.push('/views-dev/index')">返回</el-button>
    </div>
    <el-tabs v-model="activeName">
      <el-tab-pane label="ElementPlus Icons（项目已引入）" name="el">
        <div class="icon-container">
          <div v-for="key in epJsonList" :key="key" class="icon-item" @click="copyText(`ep:${key}`)">
            <cjui-icon :icon="`ep:${key}`" :size="30" />
            {{ `ep:${key}` }}
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="自定义图标（项目已引入）" name="custom">
        <div class="icon-container">
          <div v-for="item in customIcons" :key="item.name" class="icon-item" @click="copyText(item.name)">
            <cjui-icon :icon="item.name" :size="30" />
            {{ item.name }}
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="本地图标（项目已引入）" name="local">
        <div class="icon-container">
          <div v-for="item in iconsLocal" :key="item" class="icon-item" @click="copyText(item)">
            <cjui-icon :icon="item" :size="30" />
            {{ item }}
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane
        v-for="item in jsonList"
        :key="item.name"
        :label="`${item.name}`"
        :name="item.prefix"
      >
        <div v-if="activeName === item.prefix" class="icon-container">
          <div v-for="icon in item.icons" :key="icon.name" class="icon-item" @click="copyText(`${item.prefix}:${icon.name}`)">
            <cjui-icon :icon="`${item.prefix}:${icon.name}`" :size="30" />
            {{ `${item.prefix}:${icon.name}` }}

            <div class="icon-item-btns">
              <cjui-icon icon="ep:copy-document" :size="16" title="复制注册代码" @click.stop="copyText(icon.str)" />
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { useClipboard } from '@vueuse/core'
import epJson from '@iconify/json/json/ep.json'
import customIcons from '@/plugins/svgIcon/icons-custom'
import { iconsLocal } from './icons-local'
import { jsonList } from './icons'

const message = useMessage()

const epJsonList = Object.keys(epJson.icons)

const activeName = ref('el')

const { copy, copied, isSupported } = useClipboard()
const copyText = async (txt: string) => {
  if (!isSupported) {
    message.notifyWarning('Your browser does not support Clipboard API')
    return
  }
  await copy(txt)
  if (copied) {
    message.notifySuccess('复制成功')
  }
}

onMounted(() => {})
</script>

<style lang="scss" scoped>
.icon-container {
  display: flex;
  flex-wrap: wrap;
  margin: 15px;
  border-top: 1px solid #eee;
  border-left: 1px solid #eee;

  .icon-item {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    height: 150px;
    padding: 12px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;

    &:hover {
      background-color: #f3f3f3;
    }

    .icon-item-btns {
      position: absolute;
      bottom: 10px;
      right: 10px;
      cursor: pointer;
    }
  }
}
</style>
